<template>
  <!-- 光照部分的容器 -->
  <div class="EnviromentAllSection">
    <!-- 图表容器，使用 ref 以便在 JavaScript 中操作 -->
    <div class="ChartContainer" ref="EnviromentAllSection"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { getEnv } from "@/api/Environment/index.js";
import TemperatureChart from "./TemperatureChart.vue";
import HumidityChart from "./HumidityChart.vue";
import IlluminationChart from "./IlluminationChart.vue";

// 创建一个 ref 来引用图表容器元素
const EnviromentAllSection = ref(null);
// const phData = ref([])

// 组件挂载后执行的生命周期钩子
onMounted(() => {
  // 如果图表容器元素存在，则调用 initChart 方法初始化图表
  if (EnviromentAllSection.value) {
    initChart(EnviromentAllSection.value, "数据占比");
  }
});

// onMounted(async () => {
//     const res = await getEnv();
//     if (res.code == 200) {
//         phData.value = res.data.map(item => item.ph);
//         initChart(EnviromentAllSection.value, '环境光照强度实时显示');
//         // console.log(phData.value);
//         // console.log(res.data);

//     } (error) => {
//         console.error('错误', error)
//     }
// });

// 初始化图表的函数
function initChart(chartElement, title) {
  // 如果图表元素不存在，则直接返回，不进行后续操作
  if (!chartElement) return;

  // 使用 echarts 初始化图表实例
  const myChart = echarts.init(chartElement);
  // 图表的配置项
  const option = {
    title: {
      text: title,
      left: "left",
    },
    // 图例配置
    legend: {
      orient: "vertical",
      right: "right",
      top: "20%",
    },
    label: {
      // 设置标签的显示
      show: true,
      formatter: "{b}: {d}%", // 显示百分比
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        // data: phData.value,
        // radius: [25, 150],
        // center: ['50%', '50%'],
        // roseType: 'area',
        // itemStyle: {
        //     borderRadius: 8
        // },
        data: [
          { value: 100, name: "湿度" },
          { value: 38, name: "ph值" },
          { value: 32, name: "光照" },
        ],
      },
    ],
  };
  // 使用设置好的配置项来渲染图表
  myChart.setOption(option);
}
</script>

<style lang="scss" scoped>
.EnviromentAllSection {
  width: 50%;
  height: 400px;
  // 使用flex布局，并设置为垂直方向排列子元素（按列排列）
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // background-color: aqua;

  .ChartContainer {
    // 设置图表容器的宽度为700px
    width: 100%;
    // 设置图表容器的高度为250px
    height: 300px;
    // 设置背景颜色为白色
    background-color: white;
    // 在图表容器和下方的表单之间添加20px的间距
    // margin-bottom: 20px;
  }
}
</style>
